import React, { useState } from 'react';
import { Layout, Button, Tooltip } from 'antd';
import { MenuOutlined, SettingOutlined, FireOutlined } from '@ant-design/icons';
import ConversationSidebar from '../../components/conversation/ConversationSidebar';
import MessageList from '../../components/conversation/MessageList';
import MessageInput from '../../components/conversation/MessageInput';
import ConversationSettings from '../../components/conversation/ConversationSettings';
import HotTopicPanel from '../../components/conversation/HotTopicPanel';
import { useConversationStore } from '../../stores/conversation.store';
import { useBreakpoint } from '../../hooks/useBreakpoint';
import { Container, Show, Hide } from '../../components/Responsive/ResponsiveExports';
import { ResponsiveDrawer } from '../../components/AntdProvider/ResponsiveComponents';
import BottomNavigation from '../../components/navigation/BottomNavigation';
import './style.css';

const { Sider, Content } = Layout;

const ConversationPage: React.FC = () => {
  const breakpoint = useBreakpoint();
  const isMobile = breakpoint === 'mobile';

  const [sidebarVisible, setSidebarVisible] = useState(false);
  const [settingsVisible, setSettingsVisible] = useState(false);
  const [hotTopicVisible, setHotTopicVisible] = useState(false);

  const { messages, isGenerating, sendMessage, hotTopicContext } = useConversationStore();

  const handleSendMessage = async (content: string) => {
    await sendMessage(content);
  };

  return (
    <Layout className="conversation-layout">
      {/* 桌面端：固定侧边栏 */}
      <Hide breakpoint="mobile">
        <Sider
          className="conversation-sidebar"
          width={280}
        >
          <ConversationSidebar />
        </Sider>
      </Hide>

      {/* 移动端：抽屉式侧边栏 */}
      <Show breakpoint="mobile">
        <ResponsiveDrawer
          placement="left"
          open={sidebarVisible}
          onClose={() => setSidebarVisible(false)}
          width="80%"
          styles={{ body: { padding: 0 } }}
        >
          <ConversationSidebar />
        </ResponsiveDrawer>
      </Show>

      {/* 主对话区 */}
      <Layout className="conversation-main">
        <Content className="conversation-content">
          {/* 移动端顶部工具栏 */}
          <Show breakpoint="mobile">
            <div className="mobile-header">
              <Button
                type="text"
                icon={<MenuOutlined />}
                onClick={() => setSidebarVisible(true)}
                className="h-touch w-touch"
              />
              <h2 className="text-mobile-base conversation-title-mobile">
                AI 对话助手
                {hotTopicContext && (
                  <span className="hot-topic-badge">
                    - {hotTopicContext.title}
                  </span>
                )}
              </h2>
              <div className="mobile-header-actions">
                <Tooltip title="热点创作">
                  <Button
                    type="text"
                    icon={<FireOutlined />}
                    onClick={() => setHotTopicVisible(true)}
                    className="h-touch w-touch"
                  />
                </Tooltip>
                <Button
                  type="text"
                  icon={<SettingOutlined />}
                  onClick={() => setSettingsVisible(true)}
                  className="h-touch w-touch"
                />
              </div>
            </div>
          </Show>

          {/* 桌面端顶部工具栏 */}
          <Hide breakpoint="mobile">
            <div className="conversation-header">
              <h2 className="conversation-title">
                AI 对话助手
                {hotTopicContext && (
                  <span style={{ fontSize: '14px', marginLeft: '8px', color: '#ff4d4f' }}>
                    - 基于热点: {hotTopicContext.title}
                  </span>
                )}
              </h2>
              <div className="header-actions">
                <Tooltip title="热点创作">
                  <Button
                    type="text"
                    icon={<FireOutlined />}
                    onClick={() => setHotTopicVisible(true)}
                  />
                </Tooltip>
                <Button
                  type="text"
                  icon={<SettingOutlined />}
                  onClick={() => setSettingsVisible(true)}
                />
              </div>
            </div>
          </Hide>

          <div className="conversation-messages">
            <MessageList messages={messages} isGenerating={isGenerating} />
          </div>

          <div className="conversation-input-area">
            <MessageInput
              onSend={handleSendMessage}
              disabled={isGenerating}
            />
          </div>
        </Content>
      </Layout>

      {/* 设置面板抽屉 */}
      <ResponsiveDrawer
        title="对话设置"
        placement={isMobile ? 'bottom' : 'right'}
        open={settingsVisible}
        onClose={() => setSettingsVisible(false)}
        width={isMobile ? '100%' : 360}
        height={isMobile ? '85%' : undefined}
      >
        <ConversationSettings />
      </ResponsiveDrawer>

      {/* 热点创作面板抽屉 */}
      <ResponsiveDrawer
        title="热点快速创作"
        placement="right"
        open={hotTopicVisible}
        onClose={() => setHotTopicVisible(false)}
        width={isMobile ? '100%' : 800}
        styles={{ body: { padding: 0 } }}
      >
        <HotTopicPanel />
      </ResponsiveDrawer>

      {/* 移动端底部导航 */}
      {isMobile && <BottomNavigation activeKey="conversation" />}
    </Layout>
  );
};

export default ConversationPage;